import React, { useState, useEffect } from 'react';
import SelfHead from 'components/common/selfHead';
import SelfCard from './components/selfCard';
import SelfPicker from 'components/common/selfPicker';
import Paging from 'components/common/paging';
import { getSite, getStorageList } from 'ser/actions';
import storage from 'dic/storage';
import { Toast } from 'antd-mobile';
import './index.less';

export default function Storage() {
  const [pageNumber, setPageNumber] = useState(1);
  const [pageSize, setPageSize] = useState(30);
  const [prop, setProp] = useState(null);
  const [type, setType] = useState(null);
  const [storageTypeData, setStorageTypeData] = useState(storage.type);
  // 一级省份数据
  const [province, setProvince] = useState([]);
  // 所有地点数据
  const [site, setSite] = useState([]);
  const [address, setAddress] = useState(null);
  const [list, setList] = useState([]);
  const [done, setDone] = useState(false);
  useEffect(() => {
    async function fetchData() {
      const stair = await getSite({ areaCode: 0 });
      if (stair.code === 0) {
        setSite([
          {
            value: '',
            label: '请选择',
          },
          ...stair.rows,
        ]);
        setProvince([
          {
            value: '',
            label: '请选择',
          },
          ...stair.rows,
        ]);
      }
    }
    fetchData();
  }, []);
  useEffect(() => {
    async function fetchList() {
      const res = await getStorageList({
        pageNumber,
        pageSize,
        storehouseProperty: prop,
        storehouseType: type,
        city: address,
      });
      if (res.rows.rows.length > 0) {
        setDone(false);
        setList([...list, ...res.rows.rows]);
      } else {
        setDone(true);
      }
    }
    fetchList();
  }, [pageNumber, pageSize]);
  useEffect(() => {
    async function fetchList() {
      const res = await getStorageList({
        pageNumber,
        pageSize,
        storehouseProperty: prop,
        storehouseType: type,
        city: address,
      });
      res.rows.rows ? setList([...res.rows.rows]) : null;
    }
    fetchList();
  }, [prop, type, address]);
  function handleStroageProp(val) {
    setPageNumber(1);
    setStorageTypeData(storage.type.filter(item => item.pLabel === val[0]));
    setProp(val[0]);
    setType(null);
  }
  function handleStroageType(val) {
    setPageNumber(1);
    setType(val[0]);
  }
  function handleStroageCity(val) {
    setPageNumber(1);
    val.length > 0 ? setAddress(val.join(',')) : setAddress(null);
  }
  // 地点每列发生改变的时候执行事件
  async function handleOnPickerChange(val) {
    if (val.length === 1 && val[0] !== '') {
      const secound = await getSite({ areaCode: val[0] });
      if (secound.code === 0) {
        let arr = province.map(item => {
          if (item.value === val[0]) {
            item.children = [
              {
                value: '',
                label: '请选择',
              },
              ...secound.rows,
            ];
          }
          return item;
        });
        setSite(arr);
      }
    }
    if (val.length === 2 && val[1] !== '') {
      const three = await getSite({ areaCode: val[1] });
      if (three.code === 0) {
        let arr = site.map(item => {
          if (item.value === val[0]) {
            item.children.map(ite => {
              if (ite.value === val[1]) {
                ite.children = [
                  {
                    value: '',
                    label: '请选择',
                  },
                  ...three.rows,
                ];
              }
              return ite;
            });
          }
          return item;
        });
        setSite(arr);
      }
    }
  }
  const Items =
    list.length > 0 &&
    list.map((item, index) => {
      return <SelfCard key={index} cardData={item} />;
    });
  return (
    <div className="storage">
      <SelfHead title="找仓储需求" />
      <div className="storage-head">
        <SelfPicker
          label="仓储属性"
          cols={1}
          pickerData={storage.prop}
          handlePickerChange={handleStroageProp}
        />
        <SelfPicker
          label="仓储类型"
          cols={1}
          pickerData={storageTypeData}
          handlePickerChange={handleStroageType}
        />
        <SelfPicker
          label="需求城市"
          cols={3}
          pickerData={site}
          handleOnPickerChange={handleOnPickerChange}
          handlePickerChange={handleStroageCity}
        />
      </div>
      <div className="storage-content">
        <Paging
          render={() => Items}
          handlePageChange={() => setPageNumber(pageNumber + 1)}
          done={done}
        />
      </div>
    </div>
  );
}
